<script setup lang='ts'>
import { Plus } from '@element-plus/icons-vue';
import { ref } from "vue"
//引入成功回调的ts类型
import type { UploadProps } from 'element-plus'
//当前页码
let currenPage = ref<number>(1)
//展示多少条数据
let pageSize = ref<number>(4)
const data = [
    {
        name: '华为',
        picture: 'no',

    },
    {
        name: '小米',
        picture: 'no',
    },
    {
        name: 'vivo',
        picture: 'no',
    },
    {
        name: 'oppo',
        picture: 'no',
    },
    {
        name: '华为',
        picture: 'no',

    },
    {
        name: '小米',
        picture: 'no',
    },
    {
        name: 'vivo',
        picture: 'no',
    },
    {
        name: 'oppo',
        picture: 'no',
    },
    {
        name: 'vivo',
        picture: 'no',
    },
    {
        name: 'oppo',
        picture: 'no',
    },
    {
        name: 'vivo',
        picture: 'no',
    },
    {
        name: 'oppo',
        picture: 'no',
    },
]
//对话框的显示
const dialogApear = ref<boolean>(false)
//添加商品
const addGoods = () => {
    //清空对话框的表单
    form.value.name = ''
    form.value.logoUrl = ''
    //显示对话框
    dialogApear.value = true

}
//修改商品信息
const editGoodsInfo = (info: any) => {
    //将对应商品信息赋值给表单
    form.value.name = info.name
    //显示对话框
    dialogApear.value = true
}
//对话框中表单的确认按钮
const submitDialogData = () => {
    dialogApear.value = false
    //提交表单数据，   还未完成
}
//对话框中表单的取消按钮
const canceltDialogData = () => {
    dialogApear.value = false
}
//收集对话框中表单的数据
const form = ref({
    name: '',
    logoUrl: '',
})
//上传文件成功后的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    //response:为当前上传图片请求服务器返回的数据
    //uploadFile:包含response，还包括该图片的一些信息，如字节，名字
    form.value.logoUrl = response.data
}
//删除某个商品数据
const deleteGoodsData = ()=>{
    console.log(123)
} 
</script>

<template>

    <div class="home-container">
        <el-card>
            <el-button type="primary" :icon="Plus" @click="addGoods">添加商品</el-button>
            <el-table :data="data" style="width: 100%;margin-top: 20px" :border=true>
                <el-table-column label="序号" type="index" align="center" />
                <el-table-column prop="name" label="商品名称" align="center" />
                <!----除了使用prop(该方法为通过div来插入)，也可以使用插槽(传一个结构)-->
                <el-table-column prop="picture" label="商品图片" align="center">
                    <template #="{ row, $index }">
                        {{ row.picture }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #="{ row, $index }">
                        <el-button type="primary" icon="Edit" @click="editGoodsInfo(row)">编辑</el-button>
                        <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消"
                            icon="InfoFilled" icon-color="#626AEF" :title="`你确定要删除${row.name}吗？`"
                            @confirm="deleteGoodsData">
                            <template #reference>
                                <el-button type="danger" icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" style="margin-top: 20px;">
                <!---分页器组件
                    current-page:设置当前页面
                    page-size:设置每页展示数据的条数
                    page-sizes:没页数据展示选择器
                    background:是否为分页按钮添加背景色
                    layout:调整六个子组件的布局
                -->
                <el-pagination v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
                    layout="total, prev, pager, next, jumper,->, sizes,total" v-model:current-page="currenPage"
                    :background=true :total="100" />
            </div>
        </el-card>
        <el-dialog v-model="dialogApear" title="添加商品" width="800">
            <el-form :model="form" label-width="80px" style="width:80%;margin-left: 30px">
                <el-form-item label="商品名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="商品LOGO">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="canceltDialogData">取消</el-button>
                <el-button type="primary" @click="submitDialogData">确认</el-button>
            </template>
        </el-dialog>
    </div>


</template>



<style lang="less" scoped>
.home-container {
    height: 100%;
    overflow: auto
}

avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>